{% extends "base.html" %}

{% block title %}Account Platform{% endblock %}

{% block body %}
    {# 检查是否登录 #}
    {% if user_info %}
        <!-- Quick Operate Navbar -->
        {% include "component/quick-operate-navbar.html" %}

        <div class="card-columns">
            {% for name, p in platforms.items %}
                <a href="/site/account-list?platform={{ name }}" class="btn-link">
                    <div class="card">
                        <div class="card-header">
                            <div class="row">
                                <div class="col text-dark">
                                    {{ p.name }}
                                </div>
                                <div class="col text-right">
                                    <span class="badge badge-primary badge-pill text-right">{{ p.accounts|length }}</span>
                                </div>
                            </div>
                        </div>
                        <img id="img-platform-{{ name }}" class="card-img-top" src="/api/utils/placeholder/368x160" alt="Card image cap">
                        <div class="card-body">
                            <p id="p-platform-{{ name }}" class="card-text text-dark">{{ p.description }}</p>

                        </div>
                        <div class="card-footer">
                            <small id="small-platform-{{ name }}" class="text-muted">Last updated 3 mins ago</small>
                        </div>
                    </div>
                </a>
                <script>
                    $(document).ready(function () {
                        var height = randint(150, 400);
                        $.get("/api/utils/img_url/368/" + height, function (data, status) {
                            $('#img-platform-{{ name }}').attr('src', data)
                        })
                        $.get('/api/utils/hitokoto', function (data, status) {
                            $("#small-platform-{{ name }}").text(data.data.from_where);
                            $('#p-platform-{{ name }}').text(data.data.hitokoto);
                        })
                    })
                </script>
            {% empty %}
                <div class="card">
                    <div class="list-group-item flex-column align-items-start">
                        <div class="d-flex w-100 justify-content-between">
                            <h5 class="mb-1"><i class="material-icons-sm">error_outline</i>
                                Empty</h5>
                            <small>{% now t %}</small>
                        </div>
                        <p class="mb-1">You have no any account platforms.</p>
                        <small>Use <b>Quick Add</b> to add a new accounts!</small>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <!-- 加载登录跳转组件 -->
        {% include "component/jump-to-sign-in.html" %}
    {% endif %}

    <!-- 加载数据安全组件 -->
    {% include "component/data-secure.html" %}
{% endblock %}